<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>日志查看</title>
    <link rel="stylesheet" href="static/css/plugin/bootstrap.min.css"/>
    <style type="text/css">
        /* CSS Document */
        body {
            font: normal 11px auto "Microsoft YaHei", 微软雅黑, "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
            color: #4f6b72;
            background: #E6EAE9;
        }

        a {
            color: #c75f3e;
        }

        caption {
            padding: 0 0 5px 0;
            width: 700px;
            font: italic 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
            text-align: right;
        }

        .tab {
            width: 100%;
        }

        .tab th {
            font: bold 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
            color: #4f6b72;
            border-right: 1px solid #C1DAD7;
            border-bottom: 1px solid #C1DAD7;
            border-top: 1px solid #C1DAD7;
            letter-spacing: 2px;
            text-transform: uppercase;
            text-align: left;
            padding: 6px 6px 6px 12px;
            background: #CAE8EA no-repeat;
        }

        .tab th.nobg {
            border-top: 0;
            border-left: 0;
            border-right: 1px solid #C1DAD7;
            background: none;
        }
        .tab tr{
            background-color: white;
        }
        .tab td {
            border-right: 1px solid #C1DAD7;
            border-bottom: 1px solid #C1DAD7;
            font-size: 11px;
            padding: 6px 6px 6px 12px;
            color: #4f6b72;
            font-family: "Microsoft YaHei", 微软雅黑, "MicrosoftJhengHei", 华文细黑, STHeiti, MingLiu;
        }

        .tab td.alt {
            background: #F5FAFA;
            color: #797268;
        }

        .tab th.spec {
            border-left: 1px solid #C1DAD7;
            border-top: 0;
            background: #fff no-repeat;
            font: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
        }

        .tab th.specalt {
            border-left: 1px solid #C1DAD7;
            border-top: 0;
            background: #f5fafa no-repeat;
            font: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
            color: #797268;
        }

        textarea {
            width: 350px;
            line-height: 15px;
        }

        /*---------for IE 5.x bug*/
        html > body td {
            font-size: 11px;
        }
    </style>
    <script type="text/javascript" src="static/js/jquery.min.js"></script>
    <script type="text/javascript" src="static/js/layer/layer.js"></script>
    <script src="static/js/laydate_v1.1/js/laydate.js"></script>
    <script src="static/js/config.js?v=5"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            getData(1);
        });

        function toPage(pageNum) {
            getData(pageNum);
        }

        function searchFun() {
            $("#step_body").html("");
            $("#param_body").html("");
            getData(1);
            return false;
        }

        function getData(pageNum) {
            var p = {"pageSize": 25, "pageNum": pageNum, "orderBy": "e.create_time desc"};
            p.appId = $("#appId").val();
            if($("#eventId").val()) {
	            p.eventId = $("#eventId").val();
            }
            var date_start = $("#date_start").val();
            if (date_start != "") {
                p.createTime = new Date(Date.parse(date_start.replace(/-/g, "/"))).getTime();
            }
            var date_end = $("#date_end").val();
            if (date_end != "") {
                p.endTime = new Date(Date.parse(date_end.replace(/-/g, "/"))).getTime();
            }
            p.status = $("#status").val();
            if ($("#uri").val() != "") {
                p['paramLog.uri'] = $("#uri").val();
            }
            if ($("#remoteAddr").val() != "") {
                p['paramLog.remoteAddr'] = $("#remoteAddr").val();
            }

            ajax.post('/log/event/list', p, function (data) {
                showData(data.data);
            });
        }

        function showData(data) {
            setPage(data);
            var t_body = $("#event_body");
            t_body.html("");
            if (data == null || data.result.length == 0) {
                $('<tr><td colspan="8" style="text-align: center;">暂无记录</td></tr>').appendTo(t_body);
                return;
            }
            var ds = data.result;
            for (var i = 0; i < ds.length; i++) {
                var d = ds[i];
                var tr = $("<tr onclick='getStepLog(this,\"" + d.eventId + "\")'></tr>");
                var appId = d.appId;
                if (!appId) {
                    appId = "-";
                }
                $("<td>" + appId + "</td>").appendTo(tr);
                var methodId = d.methodId;
                if (!methodId) {
                    methodId = "-";
                }
                $("<td>" + methodId + "</td>").appendTo(tr);
                if (d.paramLog) {
                	$("<td>" + d.paramLog.remoteAddr + "</td>").appendTo(tr);
                	$("<td>" + d.paramLog.httpMethod + "</td>").appendTo(tr);
                    $("<td>" + d.paramLog.uri + "</td>").appendTo(tr);
                } else {
                    $("<td>-</td>").appendTo(tr);
                    $("<td>-</td>").appendTo(tr);
                    $("<td>-</td>").appendTo(tr);
                }
                
                var status = "未知";
                if (d.status == 1) {
                    status = "开始";
                } else if (d.status == 2) {
                    status = "<span style='color: green;'>成功</span>";
                } else if (d.status == 3) {
                    status = "<span style='color:red;'>失败</span>";
                }
                $("<td>" + status + "</td>").appendTo(tr);
                $("<td>" + longMsTimeConvertToDateTime(d.createTime) + "</td>").appendTo(tr);
                //$("<td>" + longMsTimeConvertToDateTime(d.endTime) + "</td>").appendTo(tr);
                var ms = "-";
                if (d.endTime) {
                    ms = d.endTime - d.createTime;
                }
                $("<td>" + ms + "</td>").appendTo(tr);
                //$('<td><a href="JavaScript:openParamWin(\'' + d.eventId + '\')"><span style="margin: 5px;">参数详情</span></a></td>').appendTo(tr);

                tr.appendTo(t_body);
            }
        }
        
        function openParamWin(eventId) {
            $("#current_event_id").val(eventId);
            layer.open({
                title: "参数详情",
                type: 2,
                area: [$(window).width() * 0.5 + 'px', $(window).height() * 0.8 + 'px'],
                content: 'log-param.html',
                shadeClose: true
            });
        }

        function getStepLog(tr,eventId) {
            $("#event_body tr").css("backgroundColor","white");
            $(tr).css("backgroundColor","#E0FFFF");

            var p = {"orderBy":"create_time"};
            p.eventId = eventId;
            ajax.post('/log/step/list', p, function (data) {
                var t_body = $("#step_body");
                t_body.html("");
                if (data == null || data.data.length == 0) {
                    $('<tr><td colspan="3" style="text-align: center;">暂无记录</td></tr>').appendTo(t_body);
                    return;
                }
                var ds = data.data;
                for (var i = 0; i < ds.length; i++) {
                    var d = ds[i];
                    var tr = $("<tr></tr>");
                    var status = "未知";
                    if (d.status == 1) {
                        status = "成功";
                    } else if (d.status == 2) {
                        status = "<span style='color:red;'>异常</span>";
                    }
                    $("<td>" + status + "</td>").appendTo(tr);
                    $("<td><textarea readonly='readonly'>" + d.stepContent + "</textarea></td>").appendTo(tr);
                    $("<td>" + formatDateToMs(d.createTime) + "</td>").appendTo(tr);

                    tr.appendTo(t_body);
                }
            });
            
            // 获取参数详情
            getParamData(eventId);
        }
        
        function getParamData(eventId) {
            var p = {"pageSize":0,"pageNum" : 1};
            p.eventId = eventId;
            ajax.post('/log/param/list',p,function(data){
            	data = data.data
                var t_body = $("#param_body");
                t_body.html("");
                if(data == null || data.result.length == 0) {
                    $('<tr><td colspan="2" style="text-align: center;">暂无记录</td></tr>').appendTo(t_body);
                    return;
                }
                var ds = data.result;
                if(ds.length >= 1) {
                    var d = ds[0];
                    for(var name in d){
                        $("<tr><td>"+name+"</td><td><textarea readonly='readonly'>"+d[name]+"</textarea></td></tr>").appendTo(t_body);
                    }
                }
            });
        }

    </script>
</head>
<body>
<input type="hidden" id="current_event_id"/>
<div style="padding:10px 0;font-size: 12px;">
    <form id="searchForm" class="form-horizontal" onsubmit="return searchFun()">
        <input type="text" id="appId" placeholder="APPID" style="height: 30px;margin: 0px 5px;width: 80px;"/>
        <input type="text" id="eventId" placeholder="事件编号" style="height: 30px;width: 260px;margin-right: 5px;"/>
        <input type="text" id="date_start" class="laydate-icon"
               onClick="laydate({istime: true, format: 'YYYY-MM-DD hh:mm:ss'})" placeholder="开始时间" />
        至
        <input type="text" id="date_end" class="laydate-icon"
               onClick="laydate({istime: true, format: 'YYYY-MM-DD hh:mm:ss'})" style="margin-right: 10px;" />
        <select style="height: 30px;margin-right: 5px;" id="status">
            <option value="">所有状态</option>
            <option value="1">开始</option>
            <option value="2">成功</option>
            <option value="3">失败</option>
        </select>
        <input type="text" id="remoteAddr" placeholder="客户端IP" style="height: 30px;width: 120px;margin-right: 5px;"/>
        <input type="text" id="uri" placeholder="URI" style="height: 30px;width: 220px;"/>

        <button class="btn btn-primary" style="height: 30px;line-height: 18px;border-radius:0px;margin-right: 5px;" type="submit">搜索
        </button>
        <button class="btn btn-primary" style="height: 30px;line-height: 18px;border-radius:0px;" type="reset">重置
        </button>
    </form>
</div>
<table style="width:100%; height:auto; padding:0; margin:0;" border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td align="left" valign="top">
            <table class="tab" id="logTaskTable" cellspacing="0">
                <thead>
                <tr>
                    <!--<th scope="col">任务编号</th>-->
                    <th scope="col">APPID</th>
                    <th scope="col">方法ID</th>
                    <th scope="col">客户端IP</th>
                    <th scope="col">请求类型</th>
                    <th scope="col">URI</th>
                    <th scope="col">状态</th>
                    <th scope="col">开始时间</th>
                    <!-- <th scope="col">结束时间</th> -->
                    <th scope="col">耗时(ms)</th>
                    <!-- <th scope="col">操作</th> -->
                </tr>
                </thead>
                <tbody id="event_body">
                </tbody>
            </table>
            <nav><ul class="pagination" id="pageUl"></ul></nav>
        </td>
        <td align="left" valign="top" style="padding-left:4px;width: 600px;">
            <table class="tab" id="tab_step" cellspacing="0" style="top: 0px; float:left;margin-bottom: 10px;">
                <thead>
                <tr>
                    <th scope="col">状态</th>
                    <th scope="col">描述</th>
                    <th scope="col">创建时间</th>
                </tr>
                </thead>
                <tbody id="step_body"></tbody>
            </table>
            <table class="tab" id="tab_param" cellspacing="0" style="">
                <thead>
                <tr>
                    <th scope="col">参数</th>
                    <th scope="col">值</th>
                </tr>
                </thead>
                <tbody id="param_body"></tbody>
            </table>
        </td>
    </tr>
</table>
</body>
</html>